<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery综合练习2</title>
	</head>
	<script type="text/javascript" src="jquery-3.1.4.js">
		
	</script>
	<style type="text/css">
		/*设置按钮统一宽度*/
		input{
			width: 100px;
			background: #007BFF;
		}
		/*设置“自适应选项”*/
		select{
			width: 100px;
			height: 200px;
		}
	</style>
	<body>
		<center>
			<table border="1px" cellspacing="0px" cellpadding="0px" width="300px" height="200px">
				<tr>
					<td>
						<!--multiple属性设置成size=3 有三个值的下拉菜单-->
						<select name="left" multiple="multiple" size="3">
							<option value="option1">option1</option>
							<option value="option2">option2</option>
							<option value="option3">option3</option>
						</select>
					</td>
					<td>
						<input type="button" id="left_to_right" value="->" /><br>
						<input type="button" id="left_to_right_all" value="--->" />
					</td>
					<td>
						<select name="right" multiple="multiple" size="3">
							<option value="option4">option4</option>
							<option value="option5">option5</option>
							<option value="option6">option6</option>
						</select>
					</td>
				</tr>
			</table>
		</center>
		<script type="text/javascript">
			$("input[type=button]:eq(0)").click(function(){
				// 选择下拉框下所有被选择的选项放置到一个数组中
				var $all_options_selected = $("select[name=left]>option:selected");
				// 取得右边选项集合中的变量
				var $right_all_options = $("select[name=right]");
				// 利用appendTo方法对jquery对象添置到另一方面
				$all_options_selected.appendTo($right_all_options);
			});
			$("input[type=button]:eq(1)").click(function(){
				var $all_options = $("select[name=left]>option");
				var $right_all_options = $("select[name=right]");
				$all_options.appendTo($right_all_options);
			});
		</script>
	</body>
</html>
